<template>
  <textarea ref="cm"></textarea>
</template>

<script>

// Code Mirror
import CodeMirror from 'codemirror'
import 'codemirror/lib/codemirror.css'
import 'codemirror/theme/ayu-dark.css'
// Language
import 'codemirror/mode/htmlmixed/htmlmixed.js'
// Addons
import 'codemirror/addon/selection/active-line.js'
import 'codemirror/addon/selection/mark-selection.js'
import 'codemirror/addon/search/searchcursor.js'

export default {
  name: 'CodeEditor',
  props: {
    modelValue: {
      type: String,
      default: ''
    }
  },
  data () {
    return {}
  },
  mounted () {
    setTimeout(() => {
      this.initEditor()
    }, 100)
  },
  methods: {
    initEditor () {
      this.cm = CodeMirror.fromTextArea(this.$refs.cm, {
        tabSize: 2,
        mode: 'text/html',
        lineNumbers: true,
        lineWrapping: true,
        line: true,
        styleActiveLine: true,
        viewportMargin: 50,
        inputStyle: 'contenteditable',
        direction: 'ltr',
        fixedGutter: false,
        theme: 'ayu-dark'
      })
      const defaultCode = ''
      this.cm.setValue(this.modelValue || defaultCode)
      this.cm.on('change', c => {
        this.$emit('update:modelValue', c.getValue())
      })
    }
  }
}
</script>

<style lang='scss'>

</style>
